<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商城订单
      </p>
      <div class="content">
        <el-form :model="formInline" class="demo-form-inline">
          <div class="jibenInfo">订单信息</div>
          <div class="contents">
            <el-form-item label="机构名称" label-width="100px">{{
              cont.officeName
            }}</el-form-item>
            <el-form-item label="手机号" label-width="100px">{{
              cont.phone
            }}</el-form-item>
            <el-form-item label="支付时间" label-width="100px">{{
              cont.payTime
            }}</el-form-item>
            <el-form-item label="付款方式" label-width="100px">{{
              cont.payType == 1
                ? "支付宝"
                : cont.payType == 2
                ? "账户支付"
                : cont.payType == 3
                ? "微信支付"
                : cont.payType == 4
                ? "线下转账"
                : ""
            }}</el-form-item>
            <el-form-item label="订单金额" label-width="100px">{{
              cont.amount
            }}</el-form-item>
            <el-form-item label="订单号" label-width="100px">{{
              cont.orderCode
            }}</el-form-item>
            <el-form-item
              label="收款账户"
              v-if="cont.payType == 4"
              label-width="100px"
              >{{ cont.accountName }}</el-form-item
            >
            <el-form-item
              label="收款账号"
              v-if="cont.payType == 4"
              label-width="100px"
              >{{ cont.accountNo }}</el-form-item
            >
            <el-form-item
              label="支付截图"
              v-if="cont.payType == 4"
              label-width="100px"
            >
              <div
                class="picUrl"
                style="width: 80px; height: 80px"
                title="双击查看大图"
                @dblclick="shishiClick"
              >
                <img :src="cont.payImgUrl" width="100%" height="100%" alt="" />
              </div>
            </el-form-item>
          </div>

          <div class="jibenInfo">收件人信息</div>
          <div class="contents">
            <el-form-item label="收货方式" label-width="100px">{{
              cont.shipType == 0 ? "快递" : "自提"
            }}</el-form-item>
            <el-form-item label="收件人" label-width="100px">{{
              cont.linkName
            }}</el-form-item>
            <el-form-item label="手机号" label-width="100px">{{
              cont.linkPhone
            }}</el-form-item>
            <el-form-item label="收件地址" label-width="100px">{{
              cont.addr
            }}</el-form-item>
          </div>
          <div class="jibenInfo">商品信息</div>
          <div
            class="contents"
            v-for="(item, index) in form.productInfoList"
            :key="index"
          >
            <div style="padding: 0px 20px">
              <span
                >商品品牌：<b style="font-weight: 500">{{
                  item.channelName
                }}</b></span
              >
              <span style="margin-left: 20px"
                >商品型号：<b style="font-weight: 500">{{
                  item.productNo
                }}</b></span
              >
              <span style="margin-left: 20px"
                >商品名称：<b style="font-weight: 500">{{
                  item.productName
                }}</b></span
              >
              <span style="margin-left: 20px"
                >商品数量：<b style="font-weight: 500">{{
                  item.buyNumber
                }}</b></span
              >
            </div>
            <div class="title_con">
              <div class="sj">
                <div class="title_son1">起始序列号</div>
                <div class="title_son1">终止序列号</div>
                <div
                  class="title_son1"
                  v-if="$route.query.shipStatus == 0"
                  style="width: 300px"
                >
                  校验
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 0">
                  操作
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 1">
                  总数量
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  float: left;
                  min-height: 60px;
                  display: flex;
                "
                v-for="(items, indexs) in item.snInfoList"
                :key="indexs"
              >
                <div class="title_son1">
                  <el-input
                    maxlength="30"
                    :disabled="disabled"
                    v-model="items.startSn"
                  ></el-input>
                </div>
                <div class="title_son1">
                  <el-input
                    maxlength="30"
                    :disabled="disabled"
                    v-model="items.endSn"
                  ></el-input>
                </div>
                <div class="title_son1" v-if="$route.query.shipStatus == 1">
                  {{ items.productNum }}
                </div>
                <div
                  class="title_son1"
                  v-if="$route.query.shipStatus == 0"
                  style="width: 300px"
                >
                  <el-button
                    style="margin-rigth: 10px"
                    @click="check(index, indexs)"
                    type="primary"
                    >库存校验</el-button
                  >
                  商品数量{{ items.productNum }}
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 0">
                  <div
                    class="add"
                    v-if="indexs == 0"
                    @click="adds(index, indexs)"
                  >
                    +
                  </div>
                  <div
                    @click="dels(index, indexs)"
                    v-if="indexs != 0 && indexs == item.snInfoList.length - 1"
                  >
                    <img src="../../assets/images/del.png" />
                  </div>
                </div>
                <div
                  v-if="$route.query.shipStatus == 1"
                  @click="details(index)"
                  style="color: #409eff"
                  class="title_son2"
                >
                  详情
                </div>
              </div>
            </div>
          </div>
          <div class="jibenInfo" v-if="$route.query.shipType == 0">
            物流信息
          </div>
          <div class="contents" v-if="$route.query.shipType == 0">
            <el-form-item label="物流公司" label-width="100px">
              <el-input
                maxlength="20"
                :disabled="disabled"
                v-model="form.expressName"
              ></el-input>
            </el-form-item>
            <el-form-item label="物流编号" label-width="100px">
              <el-input
                :disabled="disabled"
                v-model="form.expOrderCode"
                maxlength="40"
                @change="$forceUpdate()"
                @input="
                  (value) => {
                    form.expOrderCode = value.replace(/[\W]/g, '');
                  }
                "
              ></el-input
            ></el-form-item>
          </div>
          <div class="jibenInfo">
            <el-button
              v-if="!disabled"
              type="primary"
              style="margin-left: 40%"
              @click="sure"
              >确定</el-button
            >
            <el-button
              v-if="!disabled"
              style="margin-left: 10px"
              @click="cancel"
              >取消</el-button
            >
            <el-button v-if="disabled" style="margin-left: 40%" @click="cancel"
              >返回</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="1500px">
      <div
        style="height: 48px; width: 25%; float: left"
        v-for="(it, ins) in list"
        :key="ins"
      >
        <span>{{ it.productCode }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="maskBigger" @click="closeMastWrap" v-if="picBiggerBool"></div>
    <div class="picWrapper" v-if="picBiggerBool">
      <img :src="cont.payImgUrl" width="100%" height="100%" alt="" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      picBiggerBool: "", //控制是否显示大图
      list: [],
      dialogVisible: false,
      disabled: false,
      cont: [],
      cont2: [],
      shipStatus: this.$route.query.shipStatus,
      orderCode: this.$route.query.orderCode,
      form: [
        {
          name: "111",
          list: [
            {
              name: "xxxx",
              level: "12",
            },
          ],
        },
      ],
    };
  },
  created() {
    if (this.$route.query.shipStatus == 1) {
      this.disabled = true;
    }
    axios
      .post("/api/mall/queryProductInfo", {
        shipStatus: this.shipStatus,
        orderCode: this.orderCode,
      })
      .then((res) => {
        if (res.data.code == "0000") {
          this.cont = res.data.data;
          this.cont2 = res.data.productInfo.productInfoList;
          this.form = res.data.productInfo;
        } else {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
        }
      });
  },
  mounted() {
    document.addEventListener("keyup", (e) => {
      if (e.keyCode == 27) {
        this.picBiggerBool = false; //事件名
      }
    });
  },
  methods: {
    // 关闭大图显示
    closeMastWrap() {
      this.picBiggerBool = false;
    },
    // 查看图片
    shishiClick() {
      this.picBiggerBool = true;
    },

    // 点击详情
    details(index) {
      this.list = this.form.productInfoList[
        index
      ].brandOfficeProductIolistDetailList;
      this.dialogVisible = true;
    },
    adds(index, indexs) {
      if (
        this.form.productInfoList[index].snInfoList[indexs].productNum == ""
      ) {
        return layer.open({
          content: "请先校验库存数量",
          skin: "msg",
          time: 2,
        });
      } else {
        this.form.productInfoList[index].snInfoList.push({
          endSn: "",
          productNum: "",
          startSn: "",
        });
      }
    },
    // 删除
    dels(index, indexs) {
      this.form.productInfoList[index].snInfoList.splice(indexs, 1);
    },
    // 库存校验
    check(index, indexs) {
      this.$set(
        this.form.productInfoList[index].snInfoList[indexs],
        "productUid",
        this.form.productInfoList[index].productUid
      );
      axios
        .post(
          "/api/mall/productInfoVerify",
          this.form.productInfoList[index].snInfoList[indexs]
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            this.form.productInfoList[index].snInfoList[indexs].productNum =
              res.data.buyNumber;
          } else {
            return layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2,
            });
          }
        });
    },
    // 取消
    cancel() {
      this.$router.push("orderSent");
    },
    // 点击确定
    sure() {
      for (let i = 0; i < this.form.productInfoList.length; i++) {
        for (
          let j = 0;
          j < this.form.productInfoList[i].snInfoList.length;
          j++
        ) {
          if (this.form.productInfoList[i].snInfoList[j].productNum == "") {
            return layer.open({
              content: "请进行库存检验",
              skin: "msg",
              time: 2,
            });
          }
        }
      }
      if (this.$route.query.shipStatus == 1) {
        this.$router.push("orderSent");
      } else {
        this.form.shipType = this.cont.shipType;
        axios.post("/api/mall/productInfoSave", this.form).then((res) => {
          if (res.data.code == "0000") {
            this.$router.push("orderSent");
          } else {
            return layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2,
            });
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.contents {
  background: #f9fafc;
  float: left;
  margin: 0 20px;
  padding-top: 20px;
  width: calc(100% - 40px);
}
.jibenInfo {
  font-size: 18px;
  width: calc(100% - 40px);
  margin: 10px 0px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  /* background: #f9fafc; */
  float: left;
}
.el-form-item {
  width: 400px;
}
.cont {
  float: left;
  margin-left: 20px;
  /*  padding-left: 20px; */
  width: calc(100% - 40px);
}
.title_con {
  background: #f9fafc;
  width: 100%;
  min-height: 20px;
  float: left;
  padding: 0px 20px;
}
.sj {
  min-height: 50px;
  width: 100%;
  float: left;
  overflow-x: auto;
  display: flex;
  border-bottom: 1px solid #ccc;
}
.title_son {
  width: 128px;
  float: left;
  line-height: 50px;
}
.title_son1 {
  width: 250px;
  float: left;
  line-height: 50px;
}
.title_son2 {
  width: 100px;
  float: left;
  line-height: 50px;
}
.el-button {
  padding: 8px 20px;
}
.el-input__inner {
  width: 300px;
}
.el-button {
  height: 40px;
}
.add {
  color: #409eff;
  font-size: 20px;
}
b {
  font-weight: 500;
}
.picWrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 400px;
  transform: translate(-50%, -50%);
  z-index: 999999;
}
.picUrl:hover {
  opacity: 0.8;
  cursor: pointer;
}
.maskBigger {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgb(0, 0, 0, 0.6);
  z-index: 99999;
}
</style>
